<!--  -->
<template>
  <div class="hmbackup">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-button size="small" type="primary" @click="createBackup" :disabled="disableClick">添加备份</el-button>
      </el-form-item>
    </el-form>
    <BackupTable ref="backupList" :tableData="tableData" :initData="initData" :loading="loading"/>
    <div class="footer">
      <PageTurning :page="page" :changePage="changePage" />
    </div>
    <SaveBackup ref="createBackup" :resetDataTable='resetDataTable' :backupDisabled="backupDisabled"/>
  </div>
</template>

<script>
import BackupTable from '@/components/main/user/backuprestore/backupList/BackupTable.vue'
import PageTurning from '@/components/common/PageTurning.vue'
import SaveBackup from '@/components/main/user/backuprestore/saveDialog/SaveBackup.vue'
import * as functions from '@/core/functions.js'
export default {
  created () {
    functions.hostSetup().then(setup => {
      if (setup && setup.backup && setup.backup === 1) {
        this.backupDisabled = false
      } else {
        this.backupDisabled = true
      }
    })
    this.initData()
  },
  data () {
    return {
      loading: true,
      backupDisabled: false,
      // 请求返回的数据
      tableData: [],
      page: {
        // 当前页
        page: 1,
        // 一页大小
        size: 12,
        // 总数
        total: 0
      },
      disableClick: false,
      interval: null
    }
  },
  methods: {
    initData () {
      this.loading = true
      let hostBackupRestoreHmBackupList = {
        filename: '',
        pageNum: this.page.page,
        pageSize: this.page.size
      }
      this.$jpost('/host-backup-restore/hm-backup-list', hostBackupRestoreHmBackupList).then((response) => {
        if (response && response.total > 0) {
          this.tableData = response.rows
          this.page.total = response.total
        } else {
          this.tableData = []
          this.page.total = 0
        }
        this.loading = false
      })
    },
    changePage (page) {
      this.page = JSON.parse(JSON.stringify(page))
      this.initData()
    },
    resetDataTable (filename) {
      this.disableClick = true
      this.initData()
      let hostBackupRestoreHmBackupList = {
        filename: filename,
        pageNum: this.page.page,
        pageSize: this.page.size
      }
      let num = 0
      this.interval = setInterval(() => {
        this.$jpost('/host-backup-restore/hm-backup-list', hostBackupRestoreHmBackupList).then((response) => {
          if (response && response.rows.length > 0) {
            let bool = true
            response.rows.forEach(element => {
              if (element.status === 2) {
                bool = false
              }
            })
            if (bool || num > 100) {
              this.initData()
              this.disableClick = false
              clearInterval(this.interval)
            }
          } else {
            this.initData()
            this.disableClick = false
            clearInterval(this.interval)
          }
          num++
        })
      }, 1000)
    },
    createBackup () {
      this.$refs['createBackup'].create()
    }
  },
  beforeDestroy () {
    if (this.interval) {
      clearInterval(this.interval)
    }
  },
  components: {
    BackupTable,
    SaveBackup,
    PageTurning
  }
}

</script>

<style scoped>
.hmbackup /deep/ .el-form-item {
  margin-bottom: 13px;
}
.footer{
  text-align: right;
  margin-top: 15px;
}
</style>
